<template>
  <div class="recharge-card same-change-oldstyle">
    <div class="same-head-box">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>经营设置</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/rechargeCard' }">充值卡</el-breadcrumb-item>
            <el-breadcrumb-item>充值卡列表</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">
            刷新
          </button>
        </div>
      </div>
    </div>
    <div class="same-table-box">
      <div class="tabel_header">
        <h4 class="same-title-box">充值卡列表</h4>
      </div>


      <div class="table_box">

        <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
          :data="tableData" stripe>
          <el-table-column header-align="center" width="70" align="center" label="序号">
						<template slot-scope="scope">
							{{scope.$index+1+(pageNo-1)*pageSize}}
						</template>
					</el-table-column>
          <el-table-column align="center" label="产品图">
            <template slot-scope="scope">
              <el-image style="width: 50px; height:50px" :src="scope.row.card_img" fit="cover"
                :preview-src-list="[scope.row.card_img]">
              </el-image>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="card_name" label="产品名称">
          </el-table-column>
          <el-table-column align="center" prop="type_name" label="类型">
          </el-table-column>
          <el-table-column align="center" prop="add_time" label="创建时间">
          </el-table-column>
          <el-table-column align="center" prop="address" label="状态">
            <template slot-scope="scope">
              <el-popover placement="right" width="300" trigger="hover">
                <el-table :data="scope.row.package">
                  <el-table-column align="center" property="card_money" label="面值金额"></el-table-column>
                  <el-table-column align="center" property="give_money" label="充值金额"></el-table-column>
                </el-table>
                <el-button slot="reference" type="info" size="mini" icon="el-icon-view" circle></el-button>
              </el-popover>
              <el-link @click="alterConfig(scope.row.id)" class="custom-link">修改</el-link>
            </template>
          </el-table-column>
          <template slot="empty" v-if="isLoad">
            <div class="new-no-data-show">
              <img src="../../../assets/images/no-data.png" alt="">
              <div>暂无相关数据</div>
            </div>
          </template>
        </el-table>


        <!-- <table border="0" cellspacing="0" v-loading="loading" element-loading-text="拼命加载中">
          <tr>
            <th><span>产品图</span></th>
            <th><span>产品名称</span></th>
            <th><span>类型</span></th>
            <th><span>创建时间</span></th>
            <th><span>操作</span></th>
          </tr>
          <tbody>
            <tr v-for="(i, index) in tableData" v-if="tableData.length > 0">
              <td>
                <el-image style="width: 50px; height:50px" :src="i.card_img" fit="cover"
                  :preview-src-list="[i.card_img]">
                </el-image>
              </td>
              <td>{{ i.card_name }}</td>
              <td>{{ i.type_name }}</td>
              <td>{{ i.add_time }}</td>
              <td>
                <el-popover placement="right" width="300" trigger="hover">
                  <el-table :data="i.package">
                    <el-table-column align="center" property="card_money" label="面值金额"></el-table-column>
                    <el-table-column align="center" property="give_money" label="充值金额"></el-table-column>
                  </el-table>
                  <el-button slot="reference" type="info" size="mini" icon="el-icon-view" circle></el-button>
                </el-popover>

                <el-button @click="alterConfig(i.id)" size="mini" type="primary" round>修改</el-button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="new-no-data-show" v-if="tableData.length <= 0 && isLoad">
          <img src="../../../assets/images/no-data.png" alt="" />
          <div>暂无相关数据</div>
        </div>
        <div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
    
          <el-pagination background class="pull-right clearfix" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page.sync="pageNo" :page-sizes="pageSizesList"
            :page-size="pageSize" layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
          </el-pagination>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "rechargeCard",
    data() {
      return {
        typeoption: [
          {
            value: 0,
            label: '全部状态'
          },
          {
            value: 1,
            label: '在线'
          },
          {
            value: 2,
            label: '离线'
          }
        ],
        type_name: '',
        start_time: '',
        end_time: '',
        pageNo: 1,
        pageSize: 15,
        pageSizesList: [15, 30, 40, 50],
        tableData: [], // 返回的结果集合
        totalDataNumber: 0, // 数据的总数,-----
        isLoad: true,
        loading: false //加载动画
      };
    },
    inject: ["reload"],
    created() {
      this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
      var that = this;
      if (locache.get("deviceListPage") != null) {
        that.pageNo = locache.get("rechargeCardPage");
      }
      if (locache.get("deviceListPageSize") != null) {
        that.pageSize = locache.get("rechargeCardPageSize");
      }
      var page = that.pageNo; // 当前页
      var pageSize = that.pageSize; // 每页条数
      that.getCardList();
    },
    methods: {
      alterConfig(id) {
        this.$router.push({
          path: "/rechargeCardEdit",
          query: { id }
        });
      },

      //重置搜索
      reset() {
        this.type_name = '';
        this.start_time = '';
        this.end_time = '';
        this.pageNo = 1;
        this.getCardList(this.pageNo, this.pageSize);
      },
      // 搜索事件
      serach: function () {
        this.pageNo = 1; // 当前页
        this.getCardList(this.pageNo, this.pageSize);
      },

      //获取充值卡列表
      getCardList(page, pageSize) {
        this.loading = true; //打开loading动画
        this.isLoad = false; //是否请求接口
        this.$post({
          url: "Partner/Recharge/getCardList",
          data: {
            row: pageSize,
            page: page,
            retunDataType: "list",
            // recharge_type_id: this.type_name,
            // start_time: this.start_time,
            // end_time: this.end_time,
          },
          success: res => {
            this.loading = false; //关闭动画
            this.isLoad = true; //是否请求接口
            if (res.code == 1000) {
              this.tableData = []; // 清空数据
              const list = res.data.list;
              list.forEach(element => {
                element.package = Object.values(element.package);
              });
              this.totalDataNumber = res.data.count;
              this.tableData = res.data.list;
              console.log(res.data);
            } else {
              this.tableData = []; // 清空数据
              // this.$message.error(res.message || "网络错误");
            }
          }
        });
      },

      // 每页
      handleSizeChange(val) {
        var that = this;
        locache.set("rechargeCardPageSize", val);
        that.pageSize = val; // 当前每页显示条数
        that.pageNo = 1;
        that.getCardList(that.pageNo, val); // 获取设备列表数据
      },
      // 分页
      handleCurrentChange(val) {
        var that = this;
        var pageSize = that.pageSize; // 每页条数
        that.pageNo = val;
        locache.set("rechargeCardPage", val);
        that.getCardList(val, pageSize); // 获取设备列表数据
      },

      RefreshFun() {
        this.reload();
      }
    }
  };
</script>
<style>
  .recharge-card .table_box table img {
    width: auto !important;
  }
</style>